<template>
  <div class="modal">
    <el-dialog
      v-model="dialogVisible"
      :title="isNewRef ? modalConfig.header.newTitle : modalConfig.header.editTitle"
      width="30%"
    >
      <el-form :model="formRef" label-width="80px">
        <template v-for="item in modalConfig.formItems" :key="item.prop">
          <template v-if="item.type === 'input'">
            <el-form-item :label="item.label">
              <el-input v-model="formRef[item.prop]" :placeholder="item.placeholder" />
            </el-form-item>
          </template>
          <template v-if="item.type === 'select'">
            <el-form-item :label="item.label">
              <el-select placeholder="请选择上级部门" v-model="formRef[item.prop]">
                <template v-for="option in item.options" :key="option.value">
                  <el-option v-bind="option" />
                </template>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="item.type === 'custom'">
            <slot :name="item.slotName"></slot>
          </template>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="affirmClick"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import useSystemStore from '@/store/modules/system'
import { ref, reactive } from 'vue'
interface Iprops {
  modalConfig: {
    pageName: string
    header: {
      newTitle: string
      editTitle: string
    }
    formItems: any[]
  }
  introMenu?: any
}

const props = defineProps<Iprops>()

// 对数据绑定进行初始化
const initValue: any = {}
for (const item of props.modalConfig.formItems) {
  initValue[item.prop] = ''
}

const formRef = reactive<any>(initValue)
const isNewRef = ref(true)
const editData = ref()
const systemStore = useSystemStore()

const dialogVisible = ref(false)
// 点击编辑的操作和新建的操作
function setDialogModal(isNew: boolean = true, userInfo?: any) {
  dialogVisible.value = true
  if (!isNew && userInfo) {
    isNewRef.value = false
    for (const key in formRef) {
      formRef[key] = userInfo[key]
    }
    editData.value = userInfo
  } else {
    isNewRef.value = true
    for (const key in formRef) {
      formRef[key] = ''
    }
    editData.value = null
  }
}
// 点击确认的操作
function affirmClick() {
  dialogVisible.value = false
  let infoData = formRef
  if (props.introMenu) {
    infoData = { ...infoData, ...props.introMenu }
  }
  if (isNewRef.value) {
    // 创建
    systemStore.pageNewDataInfo(props.modalConfig.pageName, infoData)
  } else {
    //编辑
    systemStore.pageEditUserInfo(props.modalConfig.pageName, editData.value.id, infoData)
  }
}
// 暴露给出去方法给外部调用
defineExpose({
  setDialogModal
})
</script>

<style lang="less" scoped>
.modal {
  :deep(.el-dialog__header) {
    text-align: center;
  }
  :deep(.el-dialog__body) {
    padding-right: 30px;
  }
  :deep(.el-dialog__footer) {
    text-align: center;
  }
  :deep(.el-select) {
    width: 100%;
  }
}
</style>
